import React, { useEffect } from 'react'
import G6 from '@antv/g6';
import "./demo2.tsx"


const data = {
  nodes: [
    { id: 'node1',  type: 'test' ,attr :{title:"uicserver ",qps:"1000 QPS",rt:"10  ms",error:"0  %"}}, // 最简单的
    { id: 'node3',  type: 'test' ,attr :{title: "boxserver",qps:"2000 QPS",rt:"10  ms",error:"0  %"}},
    { id: 'node0',  type: 'test' ,attr :{title: "paysystem",qps:"500 QPS",rt:"54  ms",error:"0  %"}},
    { id: 'node4',  type: 'test' ,attr :{title: "push",qps:"1500 QPS",rt:"20  ms",error:"0  %"}},
    { id: 'node5',  type: 'test' ,attr :{title: "manager-web",qps:"1000 QPS",rt:"40  ms",error:"0  %"}}
  ],
  edges: [
  {
    source: "node3",
    target: "node1"
  },
    {
      source: "node3",
      target: "node0"
    },
    {
      source: "node3",
      target: "node4"
    },
    {
      source: "node5",
      target: "node3"
    }
  ]
};

const Tutorital = () => {
  const ref = React.useRef(null)
  let graph = null

console.log(ref)

  useEffect(() => {
    if(!graph) {
      // 实例化 Minimap

      const minimap = new G6.Minimap()

      // 实例化 Graph
      graph = new G6.Graph({
        container: 'root',
        width: 1300,
        height: 600,
        plugins: [minimap],
        modes: {
          default: ['drag-canvas', 'zoom-canvas']
        },

        defaultNode: {
          type: 'circle',
          labelCfg: {
            style: {
              fill: '#000000A6',
              fontSize: 10
            }
          },
          style: {
            stroke: '#72CC4A',
            width: 150
          }
        },

        layout: {
          type: 'force',
          preventOverlap: true,
          linkDistance: 500,
          gpuEnabled: true,
          nodeSize:20,
          nodeStrength:300,
        },





      });
    }

    graph.getMaxZoom()

    graph.getMinZoom()

    graph.data(data)

    graph.render()

    graph.on('node:dragstart', (e) => {
      graph.layout();
      refreshDragedNodePosition(e);
    });
    graph.on('node:drag', (e) => {
      refreshDragedNodePosition(e);
    });

    function refreshDragedNodePosition(e) {
      const model = e.item.get('model');
      model.fx = e.x;
      model.fy = e.y;
    }

  }, [])

  return <div ref={ref}></div>
}

export default Tutorital
